<template>
  <div class="perView">
    <div class="view">
      <el-scrollbar
        wrap-class="scroll-view"
        wrap-style="overflow-y: scroll;overflow-x: hidden;"
        :native="false"
        :noresize="true"
      >
        <div class="html-view" v-html="text" />
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { getContentView } from '@/api/content'
export default {
  components: {
  },
  props: {
    ids: {
      type: String,
      default: ''
    },
    contentType: {
      type: String,
      default: 'Article'
    },
    viewType: {
      type: String,
      default: 'appView'
    }
  },
  data() {
    return {
      text: ''
      // text: '<p>相较3G到4G时代的平滑过渡，5G所带来的全方位提升、逆天稳定性以及下行速率，让其在未来拥有无限的可能性。近期，手机厂商发布了数十款5G新机，其中更是不乏“真香机”——就是你能用实惠的价格买到最好体验的手机。那么其中哪款才能称为是真香机呢？5G真香机体验起来又究竟如何呢？下面这几款热门5G真香机，将向你逐一展现。</p>↵<div class="mceNonEditable" style="text-align: center; position: relative;"><img id="1607941921996-8" class="insertImg" src="http://img.pconline.com.cn/images/upload/upc/tx/pcncc/2012/14/c8/245474405_1607941827270_600.jpg"></div><p>今天为大家带来的真香机，颜值很美，配置很强，体验很爽。这几款手机分别是一加8T、OPPO&nbsp;Reno5&nbsp;Pro、vivo&nbsp;X50&nbsp;Pro、荣耀Play4 Pro，首先来看主要参数表。</p>↵<div class="mceNonEditable" style="text-align: center; position: relative;"><img id="1607941922249-3" class="insertImg" src="http://img.pconline.com.cn/images/upload/upc/tx/pcncc/2012/14/c8/245474485_1607941827300_600.png"></div><h2><strong>外观</strong></h2><p>'
    }
  },
  created() {
    this.getViewText()
  },
  methods: {
    readyScroll() {},
    resizeScroll() {},
    getViewText() {
      getContentView({ ids: this.ids, viewType: this.viewType }, this.contentType).then(res => {
        console.log('获取视图数据', res)
        if (res?.content.length) {
          this.text = res.content[0].view
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
 .perView{
   width: 440px;
   height: 848px;
   background: url(//www1.pconline.com.cn/pc/content/20200126/img/preview.png) no-repeat top center;
   background-size: 100% 100%;
   background-color: #fff;
   margin: auto;
   padding-top: 22px;
   box-sizing: border-box;
   position: relative;
   .view{
     width: 375px;
     height: 800px;
     margin: auto;
     padding-top: 30px;
     box-sizing: border-box;
     border-radius: 40px;
     display: flex;
     flex-flow: column;
     overflow: hidden;
      .scroll-view{
       width: 100%;
       min-height: 100%;
       flex: 1;
       border-radius: 0 0 40px 40px;
       .html-view{
         width: 100%;
         padding: 0 10px;
         box-sizing: border-box;
         font-size: 14px;
         line-height: 2;
         display: block;
        ::v-deep img{
           max-width: calc(100% - 20px);
         }
       }
     }

   }

 }

</style>

